<template>
    <el-row :gutter="20">
        <el-col :span="10">
            <el-card>
                <div slot="header" style="font-weight:bold;font-size:15px;">
                    查询全部主队列&nbsp;&nbsp;<span style="cursor:pointer" title="刷新列表" @click="initMainQueueInfoList"><i class="el-icon-refresh"></i></span>
                </div>
                <el-table :data="mainQueueInfoList" v-loading="queryMainLoading" element-loading-text="列表加载中..." style="width: 100%" max-height="680" border fit highlight-current-row>
                    <el-table-column align="center" width="500px" prop="mainQueueName" label="主队列名"></el-table-column>
                    <el-table-column align="center" prop="mainQueueLength" label="队列长度"></el-table-column>
                </el-table>
            </el-card>
            <br>
            <el-card>
                <div slot="header" style="font-weight:bold;font-size:15px;">
                    查询指定子队列
                </div>
                <el-select v-model="station_id" placeholder="请选择站点" filterable @change="queryChildQueueLength" style="width:600px">
                    <el-option
                    v-for="item in grabSourceList"
                    :key="item.station_id"
                    :label="`${item.station_id}--${item.station_name_cn}`"
                    :value="item.station_id">
                    </el-option>
                </el-select>
                <div class="queryHistory">
                    查询结果：&nbsp;&nbsp;{{childQueueLength}}
                </div>
            </el-card>
        </el-col>
        <el-col :span="14">
            <el-card>
                <div slot="header" style="font-weight:bold;font-size:15px;">
                    查询全部子队列(按队列长度倒序排列，为0的不展示)&nbsp;&nbsp;<span style="cursor:pointer" title="刷新列表" @click="initChildQueueInfoList"><i class="el-icon-refresh"></i></span>
                </div>
                <el-table :data="childQueueInfoList" v-loading="queryChildLoading" element-loading-text="列表加载中..." style="width: 100%" max-height="680" border fit highlight-current-row>
                    <el-table-column align="center" width="100px" prop="station_id" label="站点ID"></el-table-column>
                    <el-table-column align="center" width="500px" prop="station_name_cn" label="站点名称"></el-table-column>
                    <el-table-column align="center" prop="childQueueLength" label="队列长度"></el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
import icon from 'vue-awesome';
import dayjs from 'dayjs';
import lodash from 'lodash';
import { getGrabSourceList, getQueueLength } from '../../api/crawl.js';
export default {
    components: {
        'c-icon' : icon
    },
    data() {
        return {
            dayjs,
            queryMainLoading : false,
            queryChildLoading : false,
            mainQueueNameList : [],//调度主队列名称列表
            grabSourceList : [],//站点列表
            mainQueueInfoList : [],//调度子队列信息列表
            childQueueInfoList : [],//调度子队列信息列表
            station_id : '',
            childQueueLength : '--'
        }
    },
    created() {
        this.initGrabSourceList();
    },
    watch: {
    },
    computed: {
    },
    mounted() {

    },
    methods: {
        //加载站点列表
        async initGrabSourceList(){
            let data = await getGrabSourceList();
            let grabSourceList = data.rows;
            this.grabSourceList = grabSourceList.filter(item => Number(item.status) === 1 );
            grabSourceList.forEach(item=>{
                let mainQueueName = item.main_list_name ? item.main_list_name.trim() : '';
                if(mainQueueName && !this.mainQueueNameList.includes(mainQueueName)){
                    this.mainQueueNameList.push(mainQueueName);
                }
            })
            this.initMainQueueInfoList();
        },
        //加载主队列列表
        async initMainQueueInfoList(){
            this.queryMainLoading = true;
            this.mainQueueInfoList = [];
            for(let i = 0; i < this.mainQueueNameList.length; i++){
                let mainQueueName = this.mainQueueNameList[i];
                let mainQueueLength = await getQueueLength(mainQueueName);
                this.mainQueueInfoList.push({mainQueueName, mainQueueLength});
            }
            this.mainQueueInfoList = lodash.orderBy(this.mainQueueInfoList, ['mainQueueLength'], ['desc']);
            this.queryMainLoading = false;
        },
        //加载子队列列表
        async initChildQueueInfoList(){
            this.queryChildLoading = true;
            this.childQueueInfoList = [];
            for(let i = 0; i < this.grabSourceList.length; i++){
                let grabSource = this.grabSourceList[i];
                let {station_id, station_name_cn} = grabSource;
                let childQueueName = `N${station_id}`;
                let childQueueLength = await getQueueLength(childQueueName);
                if(childQueueLength){
                    let childQueue = {station_id, station_name_cn, childQueueLength};
                    this.childQueueInfoList.push(childQueue);
                }
            }
            this.childQueueInfoList = lodash.orderBy(this.childQueueInfoList, ['childQueueLength'], ['desc']);
            this.queryChildLoading = false;
        },
        async queryChildQueueLength(){
            this.childQueueLength = '--';
            if(this.station_id){
                let childQueueName = `N${this.station_id}`;
                let childQueueLength = await getQueueLength(childQueueName);
                this.childQueueLength = childQueueLength;
            }
        }
    }
};
</script>
<style>
.queryHistory{
    padding-top: 14px;
    font-size: 13px;
    color: grey;
    line-height: 1.8;
}
</style>



